import React, { useState, useRef, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { logList } from '../service';
import type { TableListItem, TableListPagination } from './data';

const TableList: React.FC = () => {
  /** 分布更新窗口的弹窗 */
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<TableListItem>[] = [
    {
      title: '请求URL',
      dataIndex: 'url',
    },
    {
      title: '请求方式',
      dataIndex: 'method',
      ellipsis: true,
    },
    {
      title: '请求用户',
      dataIndex: 'user_id',
      ellipsis: true,
      copyable: true,
    },
    {
      title: '请求地址',
      dataIndex: 'path',
    },
    {
      title: '请求IP',
      dataIndex: 'ip',
      ellipsis: true,
    },
    {
      title: '操作对象',
      dataIndex: 'obj_id',
      ellipsis: true,
    },
    {
      title: '请求参数',
      dataIndex: 'request',
      ellipsis: true,
      search: false,
      renderText: (val) => JSON.stringify(val)
    },
    {
      title: '返回结果',
      dataIndex: 'response',
      ellipsis: true,
      search: false,
      renderText: (val) => JSON.stringify(val)
    },
    {
      title: '应用ID',
      dataIndex: 'app_id',
      ellipsis: true,
    },
    {
      title: '记录时间',
      dataIndex: 'log_time',
      search: false,
    },
  ];

  return (
    <PageContainer>
      <ProTable<TableListItem, TableListPagination>
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        pagination={{
          pageSize: 10,
        }}
        toolBarRender={() => [
          // <Button
          //   key="create"
          //   type="primary"
          //   onClick={() => { handleModalVisible(true); }}
          // >
          //   <PlusOutlined /> 开通
          // </Button>,
        ]}
        request={logList}
        columns={columns}
      />

    </PageContainer>
  );
};

export default TableList;
